<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>配置信息 - HOJ Tool</title>
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/settings/style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" />
</head>

<body>
    <nav class="top-nav">
        <div class="container d-flex flex-row">
            <a href="/"><i class="bi bi-house-door"></i> 首页</a>
            <a href="/auto_solver"><i class="bi bi-robot"></i> 自动刷题</a>
            <a href="/ban_account"><i class="bi bi-person-gear"></i> 封禁账号</a>
            <a href="/statistics"><i class="bi bi-bar-chart"></i> 提交统计</a>
            <a href="/settings"><i class="bi bi-gear"></i> 配置信息</a>
        </div>
    </nav>
    <header class="header">
        <div class="container">
            <h1><i class="bi bi-gear"></i> 配置信息</h1>
            <p>设置OJ平台账号、AI服务和浏览器驱动</p>
        </div>
    </header>

    <main class="container">
        <form id="settingsForm" class="settings-form">
            <div class="form-section">
                <h2>OJ平台设置</h2>
                <div class="form-group">
                    <label for="ojUrl">OJ网址</label>
                    <input type="url" id="ojUrl" name="ojUrl" required />
                </div>
                <div class="form-group">
                    <label for="ojApiUrl">OJ API地址</label>
                    <input type="url" id="ojApiUrl" name="ojApiUrl" required />
                </div>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" required />
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" required />
                </div>
            </div>

            <div class="form-section">
                <h2>AI服务设置</h2>
                <div class="form-group">
                    <label for="aiUrl">AI对话地址</label>
                    <input type="url" id="aiUrl" name="aiUrl" required />
                </div>
            </div>

            <div class="form-section">
                <h2>浏览器设置</h2>
                <div class="form-group">
                    <label for="browserType">浏览器类型</label>
                    <select id="browserType" name="browserType" required>
                        <option value="edge">Microsoft Edge</option>
                        <option value="chrome">Google Chrome</option>
                        <option value="firefox">Mozilla Firefox</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="driverPath">驱动程序路径</label>
                    <div class="file-input-group">
                        <input type="text" id="driverPath" name="driverPath"
                            placeholder="例如：C:\path\to\chromedriver.exe    请使用绝对路径！！！" required />
                        <input type="file" id="driverFile" accept=".exe" style="display: none" />
                    </div>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="button primary">保存设置</button>
                <button type="button" class="button" onclick="location.href='/'">
                    返回首页
                </button>
            </div>
        </form>
    </main>

    <div class="modal-overlay" id="modalOverlay">
        <div class="modal" id="modal">
            <div class="modal-icon">
                <i class="bi" id="modalIcon"></i>
            </div>
            <div class="modal-content" id="modalContent"></div>
            <div class="modal-actions">
                <button class="modal-button primary" onclick="closeModal()">
                    确定
                </button>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="container">
            <p>
                Copyright © 2025
                <a href="https://gitee.com/wzokee/hoj-tool" target="_blank">HOJ Tool</a>.
            </p>
        </div>
    </footer>
        <script src="/settings/index.js"></script>
</body>

</html>